<template>
  <el-table v-loading="loading"  border :data="tableData" show-overflow-tooltip>
    <el-table-column label="任务名称" width="150" align="center" prop="taskName" />
    <el-table-column label="状态" prop="status" width="120" :show-overflow-tooltip="true" >
        <template #default="scope">
          <dict-tag :options="task_record_status" :value="scope.row.status" />
        </template>
      </el-table-column>
    <el-table-column  label="任务时间"  prop="taskTimeStart">
        <template #default="scope">
          <span>{{ scope.row.taskTimeStart + "-" + scope.row.taskTimeEnd }}</span>
        </template>
      </el-table-column>
    <el-table-column label="执行人" width="150" align="center" prop="workStationName" />
    <el-table-column label="类型" width="150" prop="status" :show-overflow-tooltip="true">
        <template #default="scope">
          <dict-tag :options="task_template_type" :value="scope.row.taskType" />
        </template>
      </el-table-column>
    <el-table-column label="工段" width="180" align="center" prop="workshopName" />
    <el-table-column label="产线"  width="180" align="center" prop="productLineName" />
    <el-table-column label="工艺段" width="180" align="center" prop="sectionName" />
    <el-table-column
        label="操作"
        align="center"
        width="120"
        fixed="right"
        class-name="small-padding fixed-width"
      >
        <!-- v-if="scope.row.status == 1" -->
        <template #default="scope">
          <el-button
            link
            type="primary"
            v-if="['1', '2'].includes(scope.row.status)"
            icon="Edit"
            v-hasPermi="['produce:feeding:edit']"
            @click="handleUpdate(scope.row)"
          >
            执行
          </el-button>
          <el-button
            link
            type="primary"
            v-if="['1', '2'].includes(scope.row.status)"
            icon="Edit"
            v-hasPermi="['produce:feeding:edit']"
            @click="close(scope.row)"
          >
            关闭
          </el-button>
        </template>
      </el-table-column>
  </el-table>

  <pagination
    v-show="total > 0"
    :total="total"
    v-model:page="queryParams.pageNum"
    v-model:limit="queryParams.pageSize"
    @pagination="getList"
  />
  <!-- 关闭 -->
  <el-dialog :close-on-click-modal="false" v-model="dialogClose" title="关闭任务" width="600">
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <el-form-item label="关闭原因" prop="reason">
          <el-select v-model="ruleForm.reason" placeholder="请选择关闭原因">
            <el-option
              v-for="(item, index) in shutdown_reason"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="说明" prop="remark">
          <el-input v-model="ruleForm.remark" type="textarea" placeholder="请填写说明" />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogClose = false">取 消</el-button>
          <el-button type="primary" @click="confirmClose">确 定</el-button>
        </div>
      </template>
    </el-dialog>
</template>

<script setup name="TodoTable">
import { listTaskRecord, batchCloseTask } from "@/api/productionMgt/taskCenter";
import { ref, reactive, toRefs, getCurrentInstance } from "vue";
import DataInfo from "./../../productionMgt/taskCenter/data.vue";
const { proxy } = getCurrentInstance();
const props = defineProps({
  api: {
    type: Function,
    default: null,
  },
  params: {
    type: String,
    default:'',
  },
  
});
const loading = ref(true);
const tableData = ref([]);
const { task_record_status } = proxy.useDict("task_record_status");
const { task_template_type } = proxy.useDict("task_template_type");
const dialogClose = ref(false);
const ruleFormRef = ref();
const closeInfo = ref({});
const ruleForm = reactive({
  reason: "",
  remark: "",
});
const validateRemark = (rule, value, callback) => {
  if (value === "" && ["1", "2"].includes(ruleForm.reason)) {
    callback(new Error("请填写关闭原因"));
  } else {
    callback();
  }
};
const rules = reactive({
  reason: [
    {
      required: true,
      message: "请选择关闭原因",
      trigger: "change",
    },
  ],
  remark: [{ validator: validateRemark, trigger: "blur" }],
});
const total = ref(0);
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    queryToDoTask:true
    // status: '1',
  },
});
const { queryParams, form } = toRefs(data);

/** 查询字典类型列表 */
function getList() {
  loading.value = true;
  let newForm = JSON.parse(JSON.stringify(queryParams.value));
  if(props.params){
    console.log(props.params);
    newForm.workshopCode = props.params.split('/')[0] || '';
    newForm.lineCode = props.params.split('/')[1] || '';
    newForm.sectionCode = props.params.split('/')[2] || '';
  }

  listTaskRecord(newForm).then((response) => {
    tableData.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}
/** 任务填报 */
function handleUpdate(row) {
  proxy.subPage(DataInfo, { title: "任务填报", data: { ...row, parentType: "add" } }, () => {
    getList();
  });
}
// 关闭
function close(row) {
  closeInfo.value = row;
  ruleForm.reason = "";
  ruleForm.remark = "";
  dialogClose.value = true;
}
function confirmClose() {
  ruleFormRef.value.validate((valid) => {
    console.log(valid);
    batchCloseTask({
      taskRecordDetailIds: [closeInfo.value.taskRecordDetailId],
      closeReason: ruleForm.reason,
      remark: ruleForm.remark,
    }).then((res) => {
      console.log(res);
      dialogClose.value = false;
      proxy.$modal.msgSuccess("关闭成功");
      getList();
    });
  });
}
getList();
</script>

<style lang="scss" scoped></style>
